<template>
  <CDialog
    :title="title"
    size="default"
    v-model:visible="dialogVisible"
    :loading="loading"
    :footer="false"
  >
    <div class="model-select-dialog-container">
      <div class="g-flex-between-center">
        <el-input
          placeholder="产品编码或名称"
          v-model="searchForm.nameOrCode"
          clearable
          style="width: 320px"
          :suffix-icon="CIconSearch"
          @input="handleSearch"
        >
        </el-input>
        <div id="model-select-header-right"></div>
      </div>
      <CTable ref="modelSelectTableRef" v-bind="tableOptions">
        <vxe-column show-overflow="tooltip" width="552">
          <template #default="{ row }: { row: GetListVisibleModelResult }">
            <CTableColumn :main-text="row.modelName" :sub-text="row.modelName">
              <template #mainTextRight>
                <el-tag class="g-ml4" type="info">编码：{{ row.modelCode }}</el-tag>
              </template>
              <template #subText>
                <div class="g-flex-start-center">
                  <span class="select-model-dialog-sub-text"
                    >核算标准：{{ StandardMap[row.standard] }}</span
                  >
                  <el-divider
                    class="select-model-dialog-sub-divider"
                    direction="vertical"
                  ></el-divider>
                  <span class="select-model-dialog-sub-text"
                    >核算年份：{{ row.accountYear }}年</span
                  >
                  <el-divider
                    class="select-model-dialog-sub-divider"
                    direction="vertical"
                  ></el-divider>
                  <span class="select-model-dialog-sub-text"
                    >产品碳足迹：

                    {{
                      empty(row?.unitResult) !== '-'
                        ? `${renderResultUnit(row?.unitResult as number)}/${row?.referenceFlowUnit}`
                        : '-'
                    }}</span
                  >
                </div>
              </template>
            </CTableColumn>
          </template>
        </vxe-column>
        <vxe-column width="80">
          <template #default="scope">
            <el-button type="primary" text @click="handleConfirm(scope.row)">选择</el-button>
          </template>
        </vxe-column>
      </CTable>
    </div>
  </CDialog>
</template>

<script lang="ts" setup name="ModelSelectDialog">
import { defineProps, withDefaults, defineEmits, computed, ref, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { CTable, CTableColumn, CTableProps } from '@/components/CTable';
import CIconSearch from '@/components/CIconSearch/index.vue';
import { debounce } from 'lodash';
import { getListVisibleModel } from '@/apis/pcf/pcfForm/pcfForm';
import type {
  GetListVisibleModelParams,
  GetListVisibleModelResult
} from '@/apis/pcf/pcfForm/model/pcfFormModel';
import type { BasicPagingListParams } from '@/apis/basicModel';
import { removeUndefinedParams } from '@/utils/index';
import { StandardMap } from '@/constants/enum';
import { renderResultUnit, empty } from '@/utils/index';

interface ModelSelectDialogProps {
  visible: boolean;
  title: string;
}
const props = withDefaults(defineProps<ModelSelectDialogProps>(), {});
interface ModelSelectDialogEmits {
  (e: 'update:visible', visible: boolean): void;
  (e: 'select', row: GetListVisibleModelResult): void;
}
const emits = defineEmits<ModelSelectDialogEmits>();
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emits('update:visible', val);
  }
});
const loading = ref(false);
/**
 * 搜索
 */
const searchForm = reactive({
  nameOrCode: '',
  accountYear: '',
  standard: ''
});
/**
 * table ref
 */
const modelSelectTableRef = ref();
/**
 * 搜索
 */
const handleSearch = debounce(() => {
  modelSelectTableRef.value?.refresh();
}, 600);

// 表格数据获取
function loadData(parameter: BasicPagingListParams) {
  const params = Object.assign(handleParams(), parameter);
  return getListVisibleModel(params);
}

// 处理参数
const handleParams = (): GetListVisibleModelParams => {
  // 参数
  let params: GetListVisibleModelParams = {
    nameOrCode: searchForm.nameOrCode
  };
  params = removeUndefinedParams(params);
  return params;
};
/**
 * 选择操作
 */
function handleConfirm(row: GetListVisibleModelResult) {
  console.log('handleConfirm', row);
  emits('select', row);
  // dialogVisible.value = false;
}
/**
 * 表格配置
 */
const tableOptions: CTableProps = {
  pagination: {
    teleport: '#model-select-header-right',
    layout: 'prev, slot, next'
  },
  loadData,
  extraTableOption: {
    showHeader: false,
    rowConfig: { isCurrent: false, isHover: false }
  },
  cellHeightSize: 'large'
};
</script>

<style scoped>
.model-select-dialog-container {
  padding-bottom: 14px;
  .select-model-dialog-sub-text {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 20px;
  }
  .select-model-dialog-sub-divider {
    height: 12px;
    border-color: #ebeff2;
  }
}
</style>
